<template>
  <div class="main">
    <el-form :inline="true" label-width="120px" labelPosition="left" :model="pay">
      <el-row type="flex" justify="space-around">
        <el-col :span="24">
          <el-form-item label="退款日期">
            <el-date-picker
              style="width:300px"
              type="date"
              v-model="pay.payment_time"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="退款类型">
            <el-select
              v-model="pay.item_status"
              style="width:300px;"
              value-key="id"
              @change="moneyChange"
              placeholder="请选择"
            >
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="退款金额(万元)">
            <el-input v-model="pay.money" style="width:300px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附件">
            <el-upload
              class="upload-demo"
              action="http://dev.media.xkphp.com/api/upload"
              multiple
              :on-success="refundSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
import { GET_CONTRACT_BACK_MONEY } from "../../../api/Salesman.js";

import { SETDATE } from "@/api/System.js";
import moment from "moment";

export default {
  props: ["refundType"],
  data() {
    return {
      pay: {
        item_status: {},
        money: "",
        file_path: [],
        payment_time: ""
      },
      projectList: []
    };
  },
  methods: {
    getType() {
      GET_CONTRACT_BACK_MONEY({}).then(res => {
        if (res.code == 200) {
          this.projectList = res.data;
        } else {
          this.$message.error("获取项目失败,请关闭重试");
        }
      });
    },
    moneyChange(e) {
      this.pay.item_status = e;
    },
    refundSuccess(response, file, fileList) {
        // console.log(response)
      this.pay.file_path.push(response.data.path);
    }
  },
  watch: {
    refundType(newVal, oldVal) {
      if (newVal) {
        this.pay = newVal;
      }
    }
  },
  mounted() {
    this.getType();
  }
};
</script>

<style scoped lang='scss'>
.main {
  width: 100%;
  height: 100%;
}
</style>